<template>
	<view style="width: 100%;display: flex;">
		<view class="left">
			<manage></manage>
		</view>
		<view style="width: 90%;">
			<uni-search-bar placeholder="搜索订单编号" bgColor="#EEEEEE" @confirm="search" cancelButton="none" />
			<!-- :loading="true" -->
			<uni-table border stripe type="selection" emptyText="暂无更多数据" selection-change="multipleChoose">

				<uni-tr>
					<uni-th align="center" width="60">序号</uni-th>
					<uni-th align="center" >编号</uni-th>
					<uni-th align="center">公告名称</uni-th>
					<uni-th align="center" >发布时间</uni-th>
					<uni-th align="center" >内容</uni-th>
					<uni-th align="center">操作</uni-th>			
				</uni-tr>
				<uni-tr v-for="(item, index) in announ" :key="index">
					<uni-td align="center">{{index+1}}</uni-td>
					<uni-td align="center">{{item.id}}</uni-td>
					<uni-td align="center">{{item.announcementTitle}}</uni-td>
					<uni-td align="center">{{item.createTime}}</uni-td>
					<uni-td align="center">{{item.announcementContent}}</uni-td>
					<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary" @click="edit(index)">修改</button>
							<button class="uni-button" size="mini" type="warn" @click="del(index)">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view>
				<uni-row>
					<uni-col :span="3" class="grid">
						<button type="primary" icon="uni-icon-circle-plus-outline" size="mini"
							@click="inputDialogToggle" class="uni-button" width="30px">新增
						</button>
					</uni-col>
					<uni-col :span="3" class="grid">
						<button type="warn" icon="uni-icon-delete" size="mini" @click="delSelect" class="uni-button"
							width="30px">删除
						</button>
					</uni-col>
				</uni-row>
			</view>
			<br />
			<!-- <uni-pagination :total="50" title="标题文字" /> -->
			<!--分页条-->
			<uni-pagination background layout="prev, pager, next" :total="page.totalRecords" :page-size="page.pageSize"
				@current-change="currentChange()">
			</uni-pagination>
			<view>
				<!-- 输入框示例 -->
				<uni-popup ref="inputDialog" type="dialog">
				<scroll-view scroll-y="true" class="scroll-Y">
						<uni-popup-dialog ref="inputClose" title="新增公告" @confirm="addgonggao" @close="closeinput">
							<uni-forms id="#addground" ref="#addground" :modelValue="addground" labelWidth="80px">
								<uni-forms-item label="名称:" prop="announcementTitle" leftIcon="plusempty">
									<uni-easyinput v-model="addground.announcementTitle"></uni-easyinput>
								</uni-forms-item>
							<!-- 	<uni-forms-item label="时间:" prop="createTime" leftIcon="plusempty">
									<uni-easyinput v-model="addground.createTime"></uni-easyinput>
								</uni-forms-item> -->
								<uni-forms-item label="内容:" leftIcon="plusempty" prpo="announcementContent">
									<textarea style="border: 1px solid; width: 95%;" maxlength="1000"
										v-model="addground.announcementContent"></textarea>
								</uni-forms-item> 
							</uni-forms>
						</uni-popup-dialog>
				</scroll-view>
				</uni-popup>
			</view>
			<view>
				<uni-popup ref="eduDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" title="修改商品信息" @confirm="dialogInputConfirm" @close="dialogedu">
						<uni-forms id="#ediground" ref="#ediground" :modelValue="ediground" labelWidth="120px">
							<uni-forms-item label="编号:" prop="id" leftIcon="plusempty">
								<uni-easyinput v-model="ediground.id" :disabled="true"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="名称:" prop="announcementTitle" leftIcon="plusempty">
								<uni-easyinput v-model="ediground.announcementTitle"></uni-easyinput>
							</uni-forms-item>
							<!-- <uni-forms-item label="时间:" prop="createTime" leftIcon="plusempty">
								<uni-easyinput v-model="ediground.announ_createTime"></uni-easyinput>
							</uni-forms-item> -->
							<uni-forms-item label="内容:" leftIcon="plusempty" prpo="announcementContent">
								<textarea style="border: 1px solid; width: 95%;" type="text"
									v-model="ediground.announcementContent" maxlength="1000"></textarea>
							</uni-forms-item>
						</uni-forms>
					</uni-popup-dialog>
				</uni-popup>
			</view>
			<view>
				<uni-popup ref="delDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" title="删除信息" @confirm="delculture" @close="delDian">
						<text>确定要删除这条公告吗？</text>
					</uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import manage from "@/components/manage/manage.vue";
	export default {
		components: {
			manage,
		},
		data() {
			return {
				delindex:0,
				intxt: '',
				addresId: 0,
				announ: [],
				addground: {
					id: "",
					announcementTitle:"",
					// createTime:"",
					announcementContent: "",
				},
				ediground: {
					id: "",
					announcementTitle: '',
					// createTime: "",
					announcementContent: "",
				},
				page: {
					pageSize: 10, //每页条数,  默认10条
					totalRecords: 0, //总条数
					totalPages: 0, //总页数
					pageNum: 0,
				},
				current: 0
			}
		},
		methods: {
			// // 每页显示多少条数据
			sizeChange(e) {
				this.page.pageSize = e;
			},
			//翻页
			currentChange(e) {
				this.page.pageNum = e.current;

			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			edit(index) {
				this.ediground = this.announ[index]
				this.$refs.eduDialog.open()
			},
			getculture() {
				uni.request({
					url: this.api.Getannoun,
					method: "GET",
				}).then(data => {
					let [err, res] = data
					this.announ = res.data
					console.log(res.data)
					this.page.totalRecords = this.announ.length;
					this.page.totalPages = this.page.totalRecords / this.page.pageSize + 1;
				})
			},
			addgonggao(){

				// this.addground.announcementContent=this.addground.announcementContent.toString()
				console.log(this.addground)
				if ( this.addground.announcementTitle.length === 0 ) {
					uni.showToast({
						title: '公告添加失败',
						icon: "none"
					})
					return;
				}
				uni.request({
					url:this.api.Getannoun,
					method: 'POST',
					data:this.addground,
					success: res => {
						if(res.data){
							console.log(res.data)
							this.getculture()
							uni.showToast({
								title: '公告添加成功',
								duration: 2000
							})
						}
						else {
							uni.showToast({
								title: '公告添加失败',
								icon: "none"
							})
						}
						
					},
					fail: () => {
						uni.showToast({
							title: '公告添加失败',
							icon: "none"
						})
					},
					// complete: () => {}
				})
			},
			closeinput() {
				uni.showToast({
					title: '取消添加公告'
				})
			},
			dialogedu() {
				uni.showToast({
					title: '取消修改公告'
				})
			},
			delDian() {
				uni.showToast({
					title: '取消删除公告'
				})
			},
			dialogInputConfirm() {
				uni.request({
					url: this.api.Putannoun,
					method: "PUT",
					data:this.ediground,
					success: res => {
						if(res.data){
							this.getculture()
							uni.showToast({
								title: '公告修改成功',
								duration: 2000
							})
						}
						else {
							uni.showToast({
								title: '公告修改失败',
								icon: "none"
							})
						}
					},
					fail: () => {
						uni.showToast({
							title: '公告修改失败',
							icon: "none"
						})
					},
				})
			},
			del(e) {
				this.delindex = e
				this.$refs.delDialog.open()
			},
			delculture() {
				console.log(this.announ[this.delindex].id)
				uni.request({
					url:this.api.Getannoun,
					method: "DELETE",
					data:[this.announ[this.delindex].id],
					success: res => {
						if(res.data){
							this.getculture()
							uni.showToast({
								title: '公告删除成功',
								duration: 2000
							})
						}
						else{
							uni.showToast({
								title: '公告删除失败',
								icon: "none"
							})
						}
					},
					fail: () => {
						uni.showToast({
							title: '公告删除失败',
							icon: "none"
						})
					},
				})
				},
			
		},
		onLoad() {
			// this.utilList.faToast()
			this.getculture()
		},
	}
</script>


<style scoped>
	.uni-group {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.left {
		border: 1px solid;
		background-color: #c5c5c5;
		height: 100%;
		width: 10 %;
	}

	.rec {
		float: left;
		width: 75%;
		/* height: 100%; */

	}
	input {
		border: 1px solid;
		border-radius: 18px;
	}

	uni-button {
		font-size: 7px;
		border-radius: 18px;
	}

	.table {
		width: 100%;
		border: 1px solid;
		text-align: center;
	}

	.uni-th {
		/* border: #000000 1px solid; */
		/* background-color: #c5c5c5; */

	}

	uni-td {
		align-items: center;
	}

	.button-edu {
		background-color: #18BC37;
	}

	.button-del {
		background-color: #c00000;
	}

	.scroll-Y {
		height: 600px+;
	}

	.textureCss {
		width: auto;
		height: 40px;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		text-align: center;
		line-height: 40px;
	}

</style>
